<template>
	<view>
		<navbar name="账户设置"></navbar>
		<view class="w750bgf">
			<view class="user-view">
				<view class="user-title">
					头像
				</view>
				<!-- @tap="camera"  -->
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar" plain>
					<image class="user-image" :src="avatarUrl" mode="头像"></image>
				</button>
			</view>
			<u-line />
			<view class="user-view">
				<view class="user-title">
					昵称
				</view>
				<input class="user-input" type="nickname" :value="nickName" placeholder="请输入昵称" @input="nameBlur" />
			</view>
			<u-line />
			<view class="user-view">
				<view class="user-title">
					性别
				</view>
				<input class="user-input" :disabled="true" type="text" @tap="handleTap('picker1')"
					:value="sex==1?'男':(sex==2?'女':'未知')" />
			</view>
			<u-line />
			<view class="user-view">
				<view class="user-title">
					简介
				</view>
				<input class="user-input" type="text" :value="remark" placeholder="请点击输入您的简介" @input="exBlur" />
			</view>
			<u-line />
		</view>
		<button class="quit" type="default" @tap="updateUser(avatarUrl,sex,nickName,remark)">保存</button>
		<lb-picker ref="picker1" v-model="sex" mode="selector" :list="list1" :dataset="{ name: 'label' }"
			@change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
		</lb-picker>
	</view>
</template>
<script>
import lbPicker  from '../../components/lb-picker/index';

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import { updateUserInfo } from '@/sg/index'

	export default {
		components: {
			lbPicker,
			uLine,
		},
		data() {
			return {
				value1: '',
				label1: '',
				list1: [{
						label: '男',
						value: '1'
					},
					{
						label: '女',
						value: '2'
					}
				],
				sex: 1, //
				avatarUrl: '', //头像
				nickName: '', //用户昵称
				remark: '',
				result: {},
			}
		},
		created() {
			let _this = this;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', this.uAvatarCropper)
		},
		onLoad() {
			this.getBaseUserInfo()
		},
		onUnload() {
			uni.$off('uAvatarCropper', this.uAvatarCropper)
		},
		methods: {
			// 裁剪图片回调
			uAvatarCropper(path){
				let _this = this;
				let loginKey = global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'

				uni.uploadFile({
					url: global.host+'cms-service/file',
					filePath: path,
					fileType: 'image',
					name: 'upfile',
					header: {
						'Authorization': uni.getStorageSync(loginKey),
						userSource: 1, //用户类型 1:C端用户  2:员工
					},
					success: (resdata) => {
						_this.avatarUrl = JSON.parse(resdata.data).result.url;
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
					}
				});
			},
			//剪切图片
			chooseAvatar(e) {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				const { avatarUrl } = e.detail;
            	this.uAvatarCropper(avatarUrl)
			},
			//修改头像
			amendHeadImg() {
				// this.loadingone = true;
				// this.$loginl.put(global.apiUrls.amendUserData, {
				// 		adviserId: this.loginUserData.adviserId, //用户id
				// 		adviserAvatarUrl: this.handimg, //头像地址
				// 	})
				// 	.then(res => {
				// 		console.log(res.data, '修改头像')
				// 		if (res.data.code == 1000) {
				// 			this.loadingone = false; //关闭动画
				// 			this.$message.info('修改成功');
				// 		} else {
				// 			this.loadingone = false; //关闭动画
				// 			this.$message.info('修改失败了,稍候再试试吧');
				// 		}
				// 	}).catch(err => {
				// 		this.loadingone = false; //关闭动画
				// 		// console.log(res)
				// 	})
			},
			// 用户输入昵称
			nameBlur(e) {
				this.nickName = e.detail.value;
			},
			// 用户输入简介
			exBlur(e) {
				this.remark = e.detail.value;
			},
			camera() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						var imageSrc = res.tempFilePaths[0]
						let loginKey = global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'

						uni.uploadFile({
							url: global.host+'cms-service/file',
							filePath: imageSrc,
							fileType: 'image',
							name: 'upfile',
							header: {
								'Authorization': uni.getStorageSync(loginKey),
								userSource: 1, //用户类型 1:C端用户  2:员工
							},
							success: (resdata) => {
								_this.avatarUrl = JSON.parse(resdata.data).result.url;
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
							}
						});
					}
				});
			},
			updateUser(avatarUrl, gender, nickName, remark) {
				let _this = this;
				let fdata = {
					avatarUrl: avatarUrl, //头像
					sex: gender, //性别
					nickName: nickName, //用户昵称
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					remark: remark?remark:''
				}
				this.$loginl.put(global.apiUrls.updateUser, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tab/my',
								});
							}, 2000);
							this.result = Object.assign(this.result, fdata);
							updateUserInfo(this.result)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(err => {
						console.error(err)
					})
			},
			getBaseUserInfo() {
				let _this = this;
				this.$loginl.get(global.apiUrls.getBaseUserInfo + '?userId=' + uni.getStorageSync(
						global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result
							_this.avatarUrl = result.avatarUrl;
							_this.nickName = result.nickName;
							_this.remark = result.remark;
							_this.sex = result.sex;
							_this.result = result;
						}
					}).catch(err => {})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
				// this.sex = e.value
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				this.sex = e.value
				// if (e) {
				// 	const name = e.dataset.name
				// 	const label = e.item.label
				// 	if (name && label) {
				// 		this[name] = label
				// 	}
				// }
			},
			handleCancel(e) {
				console.log('cancel::', e)
			}
		}

	}
</script>

<style lang="scss">
	@import "./base.scss"
</style>
